.login-page {
  @main-border-color: lighten(#323435, 2%);
  @padding: 30px;

  background: @brand-primary;
  color: #fff;
  padding-top: 150px;

  .errors-container {
    margin-bottom: @base-margin;
    padding: 0 @padding;
  }

  .login-form {
    position: relative;
    padding: @padding;
    margin-bottom: @base-margin;
    //background: lighten(@brand-primary, 1%);

    &.fade-in-effect {
      //left: -40px;
      .opacity(0);
      .transition(~"all 800ms cubic-bezier(0.390, 0.575, 0.565, 1.000)");

      @media screen and (max-width: @screen-sm) {
        left: 0;
      }

      .form-group {
        @fg-delay: 150ms;

        position: relative;
        //top: -20px;
        .opacity(0);
        .transition(~"all 500ms ease-out");
        .transition-delay(@fg-delay * 1);

        //+ .form-group { .transition-delay(@fg-delay * 2); }
        //+ .form-group + .form-group { .transition-delay(@fg-delay * 3); }
        //+ .form-group + .form-group + .form-group { .transition-delay(@fg-delay * 4); }
      }

      + .external-login {
        .opacity(0);
        .transition(~"all 500ms cubic-bezier(0.390, 0.575, 0.565, 1.000)");
        .transition-delay(100ms);
      }

      &.in {
        left: 0;
        .opacity(1);

        .form-group {
          top: 0;
          .opacity(1);
        }

        + .external-login {
          .opacity(1);
        }
      }
    }

    .login-header {
      margin-bottom: @base-margin * 2;

      .logo {
        display: block;

        img {
          vertical-align: baseline;
        }

        span {
          padding-left: 3px;
          color: fade(@main-text-color, 60%);
          font-size: @font-size-h4 - 2;
          vertical-align: baseline;
        }
      }

      p {
        color: @main-text-color;
        font-size: @font-size-base;
        margin: 0;
        margin-top: @base-padding;
      }
    }

    .form-group {
      @padding-base-vertical: 20px;
      @label-line-height: 40px;

      position: relative;
      margin-bottom: @base-margin;

      .control-label {
        line-height: @label-line-height;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        padding: 0 @base-padding+3;
        color: @main-text-color;
        cursor: text;
        &:extend(.transall);
      }

      .form-control {
        height: @label-line-height;
        .placeholder(fade(@main-text-color, 50%));
        &:extend(.transall);

        &.input-dark {
          background: #313334;
          border: 1px solid transparent;
          color: #fff;
          .placeholder(fade(#fff, 50%));
        }

        &.error {
          border-color: fade(@brand-danger, 50%);
        }
      }

      label.error {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        padding-right: @base-padding + 2;
        font-size: @font-size-small;
        line-height: @label-line-height;
        color: fade(#FFF, 70%);
      }

      &.validate-has-error {

        .form-control {
          border-color: fade(@brand-danger, 50%);
        }
      }

      &.is-focused {

        .control-label {
          .opacity(0);
          visibility: hidden;
        }
      }

      .btn {
        padding-top: @padding-base-vertical/1.8;
        padding-bottom: @padding-base-vertical/1.8;

        i {
          margin-right: @base-padding/2;
        }

        &.btn-dark {
          border-color: fade(@main-border-color, 90%);
          background-color: @brand-primary;
          color: #fff;

          &:hover {
            background-color: fade(@main-border-color, 30%);
          }
        }
      }
    }

    .login-footer {
      margin-top: 45px;

      a {
        color: @main-text-color;

        &:hover {
          color: lighten(@main-text-color, 15%);
        }
      }

      .info-links {
        @color: fade(@main-text-color, 70%);

        font-size: @font-size-small - 1;
        margin-top: @base-padding/2;
        color: @color;

        a {
          color: @color;

          &:hover {
            color: @main-text-color;
          }
        }
      }
    }
  }


  .external-login {
    position: relative;
    margin-bottom: @default-padding;
    padding: 0 @default-padding;

    a {
      display: block;
      color: #fff;
      background: @brand-primary;
      padding: @base-padding+3 @base-margin;
      font-size: @font-size-base + 2;
      margin-bottom: @base-padding;

      i {
        margin-right: @base-padding/2;
      }

      &:hover {
        background: lighten(@brand-primary, 10%);
      }

      &.facebook {
        @color: #3b5998;

        background-color: @color;

        &:hover {
          background-color: darken(@color, 10%);
        }
      }

      &.twitter {
        @color: #55acee;

        background-color: @color;

        &:hover {
          background-color: darken(@color, 10%);
        }
      }

      &.gplus {
        @color: #dd4b39;

        background-color: @color;

        &:hover {
          background-color: darken(@color, 10%);
        }
      }
    }
  }


  &.login-light {
    background: @background-color;

    .errors-container, .external-login {
      padding: 0;
    }

    .form-group {

      label.error {
        color: fade(@main-text-color, 80%);
      }
    }

    .login-form {
      background: #fff;
      color: @main-text-color;

      .login-footer {

        a {
          color: @secondary-color;

          &:hover {
            color: darken(@secondary-color, 10%);
          }
        }

        .info-links {
          @color: fade(@main-text-color, 70%);

          a {
            color: @color;

            &:hover {
              color: @main-text-color;
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: @screen-sm) {
    padding-top: 0;

    .login-form,
    .errors-container,
    .external-login {
      padding-left: @base-padding;
      padding-right: @base-padding;
    }

    .errors-container {
      margin-top: @base-margin;
    }

    &.login-light {

      .login-form {
        padding-left: @default-padding;
        padding-right: @default-padding;
      }

      .errors-container,
      .external-login {
        padding-left: 0;
        padding-right: 0;
      }
    }

    .row {
      margin: 0;
    }
  }
}

.login-container {
  max-width: 960px;
  margin: 0 auto;
}


// Lockscreen
.lockscreen-page {
  background: @brand-primary;
  color: #fff;
  padding-top: 250px;

  @media screen and (max-width: @screen-sm) {
    padding-top: @default-padding;

    .row {
      margin: 0 auto;
    }
  }

  .lockcreen-form {
    @thumb-width: 25%;

    &:extend(.clearfix all);

    .user-thumb {
      float: left;
      width: @thumb-width;
      //margin-right: @base-margin;

      img {
        .box-shadow(0 0 0 6px fade(#fff, 5%));
      }
    }

    .form-group {
      position: relative;
      float: left;
      width: 100% - @thumb-width;
      padding-left: @default-padding;

      h3 {
        margin: 0;
      }

      p {
        color: @main-text-color;
        font-size: @font-size-base;
        margin: 0;
        margin-top: @base-padding;
      }

      .input-group {
        @main-border-color: lighten(#323435, 5%);
        @padding-base-vertical: 20px;
        @label-line-height: 40px;

        position: relative;
        margin-top: @base-margin;

        .form-control {
          background: transparent;
          border: 1px solid @main-border-color;
          color: #fff;
          height: @label-line-height;
          &:extend(.transall);

          &.error {
            border-color: fade(@brand-danger, 50%);
          }
        }

        label.error {
          position: absolute;
          top: 100%;
          left: 0;
          padding-top: @base-padding;
          color: fade(#fff, 60%);
          font-size: @font-size-small;
        }

        .input-group-btn {
          padding-left: @base-padding;

          .btn {
            border: 1px solid @main-border-color;
            padding: @padding-base-vertical/2 @base-margin;

            &:hover,
            &:focus {
              background-color: fade(@main-border-color, 30%);
            }
          }
        }
      }
    }

    &.fade-in-effect {

      .user-thumb {
        position: relative;
        //left: -40px;
        //.rotate(-90deg);
        .opacity(0);
        .transition(~"all 800ms ease-in-out");
      }

      .form-group {
        //top: -50px;
        .opacity(0);
        .transition(~"all 500ms ease-in-out");

        .input-group {
          //top: -25px;
          .opacity(0.5);
          .transition(~"all 800ms ease-in-out");
        }
      }

      &.in {

        .user-thumb {
          .rotate(0deg);
          .opacity(1);
          left: 0;
        }

        .form-group {
          top: 0px;
          .opacity(1);

          .input-group {
            top: 0px;
            .opacity(1);
          }
        }
      }
    }

    @media screen and (max-width: @screen-sm) {

      .user-thumb,
      .form-group {
        float: none;
        width: 100%;
      }

      .user-thumb {
        text-align: center;
        margin-bottom: @default-padding;

        a {
          display: inline-block;
        }
      }

      .form-group {
        padding-left: 0;
        text-align: center;
      }
    }
  }
}